<template>
  <el-row class="analysisWrap">
    <el-row class="title" type="flex" justify="space-between">
      <el-col type="flex">
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/left.png"/>
        </el-col>
        <el-col align="center" style="line-height: 30px;width: 180px">网站质量对比</el-col>
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/right.png"/>
        </el-col>
        <el-col style="padding-left:20px;width: 300px;color: #00DDFF;font-size: 16px;font-weight: normal">
          {{ year }}年{{ month }}月<span v-if="date_type===10">{{ day }}日</span>
        </el-col>
      </el-col>
    </el-row>
    <el-row style="height: 28px">
      <el-row type="flex" justify="end">
        <div style="padding-left: 40px;width: 200px;margin-right: 200px">
          <el-select
            v-model="selectValue"
            size="small"
            @change="selectChanged"
          >
            <el-option v-for="(score, index) in scoreSelectList" :key="index" :value="Object.keys(score)[0]" :label="Object.values(score)[0]"/>
          </el-select>
        </div>
        <MonthWeekDay
          :dataType="dataType"
          @ClickedBtn="clickedBtn"
        />
      </el-row>
    </el-row>
    <el-row style="height:calc(100% - 68px);">
      <BarCharts
        :chartData="chartData"
        :height="'100%'"
        :xTitle="date_type === 10 ? '时' : '天'"
      />
    </el-row>
  </el-row>
</template>

<script>
  import BarCharts from './BarCharts3D'
  import MonthWeekDay from './MonthWeekDay'
  import apiUrl from '@/config'
  export default {
    name: 'LinePart',
    components: {
      BarCharts,
      MonthWeekDay
    },
    data() {
      return {
        baseURL: process.env.NODE_ENV === 'production' ? apiUrl.apiUrl.devUrl : apiUrl.apiUrl.testUrl, // 生产
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate(),
        chartData: {
          xName: [],
          legendData: [],
          data1: [],
          data2: [],
          data3: [],
        },
        date_type: 20,
        data_type: 'all',
        code: null,
        dataType: 10,
        selectValue: 'score',
        scoreSelectList: [],
        sourceDataList: []
      }
    },
    created() {
      this.getScoreSelectList()
      this.repeatInFive()
    },
    methods: {
      repeatInFive() {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.getTrend()
        this.timer = setInterval(() => {
          this.getTrend()
        }, 1000 * 60 * 5)
      },
      selectChanged() {
        this.chartData.xName = Object.keys(this.sourceDataList)
        let arr0 = []
        Object.values(this.sourceDataList)[0].map(item => {
          arr0.push(item.operator)
        })
        this.chartData.legendData = arr0

        let arr1 = []
        let arr2 = []
        let arr3 = []
        Object.keys(this.sourceDataList).map(item => {
          arr1.push(this.sourceDataList[item][0][this.selectValue])
          arr2.push(this.sourceDataList[item][1][this.selectValue])
          arr3.push(this.sourceDataList[item][2][this.selectValue])
        })
        this.chartData.data1 = arr1
        this.chartData.data2 = arr2
        this.chartData.data3 = arr3
      },
      clickedBtn(value) {
        this.dataType = value
        this.getTrend()
      },
      getDestNameList() {
        this.$axios.get(`${this.baseURL}/api/benchmarking/destNameSelectListLinkQuality`).then((response) => {
          // window._api.apiDestName().then(res => {
          let res = response.data
          if (res.status === 0) {
            this.destNameList = res.data
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      getTrend() {
        this.$axios.get(`${this.baseURL}/api/benchmarking/getDest`, {
          params: {
            statisticsType: this.dataType
          }
        }).then((response) => {
          let res = response.data
          if (res.status === 0) {
            this.sourceDataList = res.data
            this.chartData.xName = Object.keys(this.sourceDataList)

            let arr0 = []
            Object.values(this.sourceDataList)[0].map(item => {
              arr0.push(item.operator)
            })
            this.chartData.legendData = arr0

            let arr1 = []
            let arr2 = []
            let arr3 = []
            Object.keys(this.sourceDataList).map(item => {
              arr1.push(this.sourceDataList[item][0][this.selectValue])
              arr2.push(this.sourceDataList[item][1][this.selectValue])
              arr3.push(this.sourceDataList[item][2][this.selectValue])
            })
            this.chartData.data1 = arr1
            this.chartData.data2 = arr2
            this.chartData.data3 = arr3
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      getScoreSelectList(){
        // window._api.apiScoreSelectList().then(res => {
        this.$axios.get(`${this.baseURL}/api/benchmarking/scoreSelectList`).then((response) => {
          let res = response.data
          if (res.status === 0) {
            this.scoreSelectList = res.data
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
    }
  }
</script>

<style scoped>
  .title{
    font-size: 20px;
    line-height: 40px;
    height: 40px;
    text-align: left;
    padding: 0px 16px;
    color: #00DDFF;
    font-weight: bold;
  }
.analysisWrap{
  height: 46vh;
  padding: 14px;
  background: rgba(14, 22, 95, 0.4);
  border: 1px solid rgba(14,101,187,0.46);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
}
.typeBtn{
  display: inline-block;
  margin-right: 8px;
  width: 44px;
  height: 28px;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(180deg, #33367b 0%, #050d25 100%);
  box-shadow: 0px 0px 4px 0px #121212 inset;
  cursor: pointer;
}
.isActive{
  background: linear-gradient(180deg, #14c473 0%, #0679dc 30%,#05091e 100%);
  box-shadow: 0px 0px 4px 0px #151515 inset;
}
</style>
